<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudoku Game</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <nav class="app-bar">
        <button onclick="HamburgerButtonClick();" class="button bar-button hamburger-button">
          <span class="material-icons">menu</span>
        </button>
        <div class="bar-font title">Sudoku</div>
        <div id="moreoption-sec" class="more-option-div more-button">
          <button onclick="moreOptionButtonClick()" class="button bar-button">
            <span class="material-icons">more_vert</span>
          </button>
          <!-- it is important to put these styles in here because if I do not do that it will not work in javaScript-->
          <div id="more-option-list" style="visibility: hidden;max-height: 10px;max-width: 40px;min-width: 40px;" class="more-option-list">
            <button onclick="hintButtonClick()" ripple-color="#003c8f" class="button nav-item vertical-adjust">Hint</button>
            <button onclick="restartButtonClick()" ripple-color="#003c8f" class="button nav-item vertical-adjust">Restart</button>
            <button onclick="SurrenderButtonClick()" ripple-color="tomato" class="button nav-item vertical-adjust">Surrender</button>
          </div>
        </div>
      
        <button id="pause-btn" onclick="pauseGameButtonClick()" class="button bar-button more-button">
          <span id="pause-icon" class="material-icons">pause</span>
          <span id="pause-text">Pause</span>
        </button>
        <button id="check-btn" onclick="checkButtonClick()" class="button bar-button more-button">
          <span class="material-icons">done_all</span>
          <span>Check</span>
        </button>
        <button id="isunique-btn" style="display: none;" onclick="isUniqueButtonClick();" class="button bar-button more-button">
          <span class="material-icons">call_split</span>
          <span>Is unique</span>
        </button>
        <button id="solve-btn" style="display: none;" onclick="solveButtonClick()" class="button bar-button more-button">
          <span class="material-icons">border_color</span>
          <span>Solve</span>
        </button>
      
      </nav>
      
      <div id="hamburger-menu" class="hamburger-menu">
        <nav id="nav-menu" class="nav-menu">
          <div class="nav-head">
            <div class="nav-head-img">
              <img src="https://image.ibb.co/jmuOKn/icon.jpg" art="" />
            </div>
            <div class="nav-head-title">Sudoku</div>
          </div>
          <ul class="nav-items">
            <button onclick="showDialogClick('dialog');" ripple-color="#003c8f" class="button nav-item vertical-adjust">
              <div>
                <span class="material-icons">add</span>
                <span style="left:12px;">New game</span>
              </div>
            </button>
            <button onclick="sudokuSolverMenuClick();" ripple-color="#003c8f" class="button nav-item vertical-adjust">
              <div>
                <span class="material-icons">edit</span>
                <span style="left:12px;">Sudoku Solver</span>
              </div>
            </button>
            <button onclick="showDialogClick('about-dialog');" ripple-color="#003c8f" class="button nav-item vertical-adjust">
              <div>
                <span class="material-icons">star</span>
                <span style="left:12px;">About</span>
              </div>
            </button>
            <div class="bar-footer">
              <ul>
                <a href="#" class="bar-footer-link">Site feedback</a>
                <a href="#" class="bar-footer-link">Privacy</a>
                <a href="#" class="bar-footer-link">Terms</a>
              </ul>
            </div>
          </ul>
        </nav>
        <div class="nav-menu-blank" onclick="hideHamburgerClick()">
      
        </div>
      </div>
      
      <div class="floating">
        <button onclick="showDialogClick('dialog');" class="button floating-btn vertical-adjust">
          <span class="material-icons">add</span>
        </button>
      </div>
      
      <div id="dialog" class="dialog">
        <div id="dialog-box" class="dialog-content">
          <div class="dialog-header">New game</div>
      
          <div class="dialog-body">
            <p>Select game difficulty to get started.</p>
            <ul>
              <li class="radio-option">
                <label for="very-easy">
                  <input id="very-easy" value="very easy" type="radio" name="difficulty"> Very easy
                </label>
              </li>
              <li class="radio-option">
                <label for="easy">
                  <input id="easy" value="easy" type="radio" name="difficulty"> Easy
                </label>
              </li>
              <li class="radio-option">
                <label for="normal">
                  <input id="normal" value="normal" type="radio" name="difficulty"> Normal
                </label>
              </li>
              <li class="radio-option">
                <label for="hard">
                  <input id="hard" value="hard" type="radio" name="difficulty"> Hard
                </label>
              </li>
              <li class="radio-option">
                <label for="very-hard">
                  <input id="very-hard" value="expert" type="radio" name="difficulty"> Expert
                </label>
              </li>
            </ul>
          </div>
      
          <div class="dialog-footer">
            <button onclick="startGameButtonClick();" ripple-color="#003c8f" class="button dialog-btn vertical-adjust">OK</button>
            <button onclick="hideDialogButtonClick('dialog');" ripple-color="#202020" class="button dialog-btn vertical-adjust">Cancel</button>
          </div>
        </div>
      </div>
      
      <div id="about-dialog" class="dialog">
      
        <div id="about-dialog-box" onblur="hideDialogButtonClick('about-dialog');" class="dialog-content about-dialog-content">
          <div class="dialog-header">CodeTeam6</div>
      
          <div class="dialog-body">
            <p>about us</p>
            <div class="card-group">
              <div class="card dialog-card">
                <div class="about-card-img">
                  <img src="https://image.ibb.co/crYHen/a_abdallah.jpg" alt="" />
                </div>
                <div class="about-card-title">Ahmad Abdalla</div>
                <div class="about-card-content">Egypt</div>
                <div class="about-card-quote">My dream is to be the best developer in the world, and I'll work continuously to achieve that.</div>
              </div>
              <div class="card dialog-card">
                <div class="about-card-img">
                  <img src="https://image.ibb.co/mKg3Kn/a_alrifai.jpg" alt="" />
                </div>
                <div class="about-card-title">Ayman Alrifai</div>
                <div class="about-card-content">Libya</div>
                <div class="about-card-quote">I love coding & design. I learn every day to build awesome stuff.</div>
              </div>
              <div class="card dialog-card">
                <div class="about-card-img">
                  <img src="https://image.ibb.co/dYd5X7/m_diab.jpg" alt="" />
                </div>
                <div class="about-card-title">Mohammad Diab</div>
                <div class="about-card-content">Syria</div>
                <div class="about-card-quote">Silent but deadly.</div>
              </div>
              <div class="card dialog-card">
                <div class="about-card-img">
                  <img src="https://image.ibb.co/g01g5S/r_bhere.jpg" alt="" />
                </div>
                <div class="about-card-title">Reham Bhere</div>
                <div class="about-card-content">Palestine</div>
                <div class="about-card-quote">I think outside the box, I love trying everything new.</div>
              </div>
      
            </div>
          </div>
      
          <div class="dialog-footer">
            <button onclick="hideDialogButtonClick('about-dialog');" ripple-color="#003c8f" class="button dialog-btn vertical-adjust">OK</button>
          </div>
        </div>
      </div>
      
      <div class="body" id="sudoku">
        <div class="card game">
          <table id="puzzle-grid">
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
            <tr>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
      
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
              <td>
                <input type="text" maxlength="1" onchange="checkInput(this)" disabled />
              </td>
            </tr>
      
          </table>
        </div>
      
        <div class="card status">
          <div id="game-number">game #0</div>
          <ul class="game-status">
            <li>
              <div class="vertical-adjust">
                <span class="material-icons">timer</span>
                <span id="timer-label">Time</span>
              </div>
              <div id="timer" class="timer">00:00</div>
            </li>
      
            <li>
              <div class="vertical-adjust">
                <span class="material-icons">network_check</span>
                <span id="game-difficulty-label">Game difficulty</span>
              </div>
              <div id="game-difficulty" class="timer">undefined</div>
            </li>
            <li>
              <div class="vertical-adjust">
                <span class="material-icons">grid_on</span>
                <span>Remaining numbers</span>
              </div>
              <div class="remain-table">
                <div class="remain-column">
                  <div class="remain-cell">
                    <div class="remain-cell-header">1</div>
                    <div onchange="document.write('Hello');" id="remain-1" class="remain-cell-content">0</div>
                  </div>
                  <div class="remain-cell">
                    <div class="remain-cell-header">4</div>
                    <div id="remain-4" class="remain-cell-content">0</div>
                  </div>
                  <div class="remain-cell">
                    <div class="remain-cell-header">7</div>
                    <div id="remain-7" class="remain-cell-content">0</div>
                  </div>
                </div>
                <div class="remain-column">
                  <div class="remain-cell">
                    <div class="remain-cell-header">2</div>
                    <div id="remain-2" class="remain-cell-content">0</div>
                  </div>
                  <div class="remain-cell">
                    <div class="remain-cell-header">5</div>
                    <div id="remain-5" class="remain-cell-content">0</div>
                  </div>
                  <div class="remain-cell">
                    <div class="remain-cell-header">8</div>
                    <div id="remain-8" class="remain-cell-content">0</div>
                  </div>
                </div>
                <div class="remain-column">
                  <div class="remain-cell">
                    <div class="remain-cell-header">3</div>
                    <div id="remain-3" class="remain-cell-content">0</div>
                  </div>
                  <div class="remain-cell">
                    <div class="remain-cell-header">6</div>
                    <div id="remain-6" class="remain-cell-content">0</div>
                  </div>
                  <div class="remain-cell">
                    <div class="remain-cell-header">9</div>
                    <div id="remain-9" class="remain-cell-content">0</div>
                  </div>
                </div>
      
              </div>
            </li>
          </ul>
      
          <!--<button class="option-button">
                          <span class="material-icons">pause</span>
                          <span>Pause</span>
                      </button>
                      <button class="option-button">
                          <span class="material-icons">done_all</span>
                          <span>Check</span>
                      </button>
                      <button class="option-button">
                          <span class="material-icons">help</span>
                          <span>Hint</span>
                      </button>
                      <button class="option-button">
                          <span class="material-icons">refresh</span>
                          <span>Restart</span>
                      </button>
                      <button class="option-button">
                          <span class="material-icons">flag</span>
                          <span>Surrender</span>
                      </button>
                  -->
        </div>
      </div>
      
      <div class="footer vertical-adjust">
        <span class="material-icons">code</span>
        <span>with</span>
        <span class="material-icons">favorite</span>
        <span>by Mohammad Diab from</span>
        <a href="#" onclick="showDialogClick('about-dialog');">#codeTeam6</a>
        <span> . © 2018 all right reserved.</span>
      </div>
</body>
</html>